<!--  -->
<template>
  <div style="width:100%;height: 100%;">
      <client-only>
          <v-chart ref="vchartRef" class="chart" :option="mergedOption" autoresize />
      </client-only>
  </div>
</template>

<script setup lang="ts">
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import { PieChart,GaugeChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, defineComponent,computed, onMounted, onUnmounted, watch } from 'vue';

// 注册必要的组件
use([
  CanvasRenderer,
  PieChart,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  LabelLayout
]);

// 定义props接收外部配置
const props = defineProps({
  chartOptions: {
    type: Object,
    default: () => ({})
  },
  height:{
     type: Number,
    default: 100
  },
  width:{
    type:Number,
    default:100
  }
});

// 默认配置

const chartRef = ref(null);
const vchartRef = ref(null);

// 合并配置
const mergedOption = computed(() => {
  return {
    ...props.chartOptions
  }
});

// 监听配置变化
watch(() => props.chartOptions, (newVal) => {
  if (chartRef.value) {
    chartRef.value.setOption(mergedOption.value);
  }
}, { deep: true });

// 监听窗口大小变化
onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const handleResize = () => {
  if (vchartRef.value) {
    vchartRef.value.resize();
  }
};
</script>

<style scoped>
.chart {
  width:100%;
  height:100%;
  /* height: 8 */
}
</style>